<script setup lang="ts">
import { IShotKeyData } from '@renderer/types'
import { reactive, ref, watch } from 'vue'
import defaultShotKeysConfig from './defaultShotKeysConfig'
const shotsList = reactive<IShotKeyData[]>([...defaultShotKeysConfig])

const showSave = ref(false)

watch(
  () => shotsList,
  () => {
    showSave.value = true
  },
  {
    deep: true
  }
)
</script>

<template>
  <div class="dev-shots-key h-full flex flex-col">
    <ul class="flex flex-col gap-2 h-full overflow-x-hidden overflow-y-auto px-2">
      <li
        v-for="item in shotsList"
        :key="item.name"
        class="flex items-center justify-between gap-4 h-10"
      >
        <div class="shot-key-name">
          {{ item.name }}
        </div>
        <bind-key
          v-model:value="item.key"
          v-model:enable="item.enable"
          class="shot-key w-60"
        ></bind-key>
      </li>
    </ul>
    <div class="save flex justify-end">
      <el-button v-if="showSave" type="primary" class="mt-4">保存设置</el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
